<template>
	<view class="address">
		<uni-nav-bar :fixed="true" status-bar :border="false" left-icon="left" title="填写兑奖地址" @clickLeft="back" />
		<view class="top_box">
			<view class="text1">{{ item.draw_name }}</view>
			<view class="text2 c_000">兑奖期限</view>
			<view class="text2 c_000">{{item.task_draw.startime}}至{{ item.task_draw.endtime }}</view>
		</view>
		<!-- 收货地址 -->
		<view class="list">
			<view class="name">收货人:</view>
			<view class="input_box">
				<input class="input" v-model="myname" placeholder="请输入收货人" />
			</view>

		</view>
		<view class="list">
			<view class="name">联系电话:</view>
			<view class="input_box">
				<input class="input" v-model="phone" placeholder="请输入联系电话" />
			</view>
		</view>

		<view class="list">
			<view class="name">所在地区:</view>
			<view class="input_box">
				<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
					<view style="color: #555;font-size:24rpx">{{regionName}}</view>
				</pick-regions>
			</view>
		</view>
		<view class="list">
			<view class="name">详细地址:</view>
			<view class="input_box">
				<input class="input" v-model="addressDetail" placeholder="请输入详细地址" />
			</view>
		</view>
		<view class="btn_next" @click="onSave">下一步</view>

	</view>
</template>
<script>
	//import {setAddress,province,city} from "../api/lcreuse";
	// vant官方省市区

	export default {
		data() {
			return {
				region: [],
				defaultRegion: ['', '', ''],
				defaultRegionCode: '',

				searchResult: [],

				myname: "",
				addressDetail: "",
				phone: "",
				post_code: "",


				item: null,
				index: null,
			};
		},
		computed: {
			regionName() {
				// 转为字符串
				var region = this.region.map(item => item.name).join(' ')
				return region ? region : "请选择"
			}
		},
		beforeCreate() {
			//document.title = "编辑收货地址";
		},
		onLoad(query) {
			if (query.obj) {
				this.item = JSON.parse(query.obj)

			}
			if (query.index) {
				this.index = query.index
			}

		},
		mounted() {},
		methods: {
			back() {
				uni.navigateBack()
			},
			handleGetRegion(region) {
				this.region = region; // code: "11110101" name: "北京市"
				console.log("region", this.region)
			},
			// 保存按钮
			onSave() {
				//	this.savedAddress = address;

				console.log(this.myname);
				console.log("1111")
				console.log("name")
				if (this.myname == "") {
					uni.showToast({
						title: "收货人不能为空",
						icon: "error",
						duration: 2000
					})
					return
				}
				if (this.phone == "") {
					uni.showToast({
						title: "联系电话不能为空",
						icon: "error",
						duration: 2000
					})
					return
				}
				console.log("region", this.region)
				if (this.region.length == 0) {
					uni.showToast({
						title: "请选择地区",
						icon: "error",
						duration: 2000
					})
					return
				}
				if (this.addressDetail == "") {
					uni.showToast({
						title: "详细地址不能为空",
						icon: "error",
						duration: 2000
					})
					return
				}
				// this.$toast.success("保存成功！");
				let shouhuodz = {
					id: this.item.task_id,
					code_id: this.item.id,
					province: this.region[0].name,
					city: this.region[1].name,
					area: this.region[2].name,
					address: this.addressDetail,
					name: this.myname,
					phone: this.phone,
					post_code: this.region[2].code,
				}
				console.log("shouhuodz", shouhuodz)

				let id = JSON.parse(uni.getStorageSync('taskInfo', 'session')).task.id;
				let url = "/pagesPrize/aboutPrize/hxaddress?obj=" + JSON.stringify(this
						.item) +
					"&index=" + this.index + '&shouhuodz=' + JSON
					.stringify(shouhuodz) + '&id=' + id;
				uni.navigateTo({
					url
				})



			},

		},

	};
</script>
<style lang="scss">
	.address {
		min-height: 100vh;
		background-color: rgba(234, 242, 251, 0.37);
		padding: 20rpx;
		padding-top: 40rpx;

		.btn_next {
			background: linear-gradient(142deg, #EFB565 0%, #D83626 100%);
			border-radius: 44rpx;
			color: #ffffff;
			font-size: 32rpx;
			padding: 11rpx 58rpx;
			margin-top: 40rpx;
			text-align: center;
		}

		.list {
			display: flex;
			margin-top: 40rpx;
			align-items: center;

			.name {
				color: #000;
				font-size: 28rpx;
				margin-right: 24rpx;
				height: 48rpx;
				line-height: 48rpx;
			}

			.input_box {
				flex: 1;

				.input {
					width: 100%;
					border-bottom: 1px solid #EEE;
					font-size: 28rpx;
					height: 48rpx;
					line-height: 48rpx;
				}
			}
		}

		// .van-button--round {
		//   background: #1E8CFF !important;
		//   border: none !important;
		// }
		.van-button {
			background: #1E8CFF !important;
			/* 你想要的颜色 */
			border: none;
			padding-bottom: 0 !important;
		}

		.van-address-edit__buttons {
			padding-bottom: 0 !important;
		}

		.shdz_box {
			background: #ffffff;
			box-shadow: 0rpx 3rpx 22rpx 1rpx rgba(1, 60, 170, 0.16);
			margin-top: 40rpx;
			border-radius: 22rpx;
		}

		.top_box {
			padding: 40rpx 15rpx;
			position: relative;
			background: #ffffff;
			box-shadow: 0rpx 3rpx 22rpx 1rpx rgba(1, 60, 170, 0.16);
			border-radius: 22rpx;
			margin-bottom: 20rpx;
			margin-top: 30rpx;

			.text1 {
				font-size: 55rpx;
				font-weight: 500;
				color: #D83724;
				text-align: center;
				padding: 20rpx 0;
				padding-top: 0;
			}

			.text2 {
				font-size: 28rpx;
				font-weight: 500;
				text-align: center;
				padding: 6rpx 0;
			}
		}
	}
</style>